<template>
	<div class="content">
		<div class="content_title">
			<p>我的课程</p>
		</div>
		<div class="content_bottom">
			<div class="content_bottom_title">
				<p class="s"></p>
				<p>我的课程</p>
			</div>
			<div class="select">
				<li v-for="(tab,i) in dataList.tabList" :class="{active:i == dataList.tabindex}"
					@click="selectTab(i,tab.status)">
					{{tab.name}}
				</li>
			</div>
			<div class="classRoom_box" v-if="dataList.list.length">
				<div v-for="(classRoom,i) in dataList.list" @click="goclassDetail(classRoom.classUuid)" class="isuser">
					<img :src="classRoom.coverImage" alt="">
					<p class="snp1">{{classRoom.className}}</p>
					<li>
						<span>主讲人：{{classRoom.classManager}}</span>
						<span>{{classRoom.classStatus}}人学习</span>
					</li>
				</div>

			</div>
			<div class="contentBox" v-if="!dataList.list.length">
				<div class="errorIcon" style="margin-top: 30px;">
					<img src="../../assets/error.png" alt="">
					<p>暂无数据</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		searchMyOnlineClass
	} from "../../api/home.js";
	import {
		reactive,
		onBeforeMount
	} from 'vue'
	import {
		useRouter
	} from 'vue-router'
	const router = useRouter()
	const dataList = reactive({
		list: '',
		studyStatus: 'studying',
		tabindex: 0,
		tabList: [{
				name: '学习中',
				status: 'studying'
			},
			{
				name: '已完成',
				status: 'studied'
			}
		]
	})
	onBeforeMount(() => {
		getList()
	})

	const getList = () => {
		var data = {
			page: {
				pageSize: 99
			},
			params: {
				// myClassUuid: "c850a8108337492fa73344a5508acebe",
				// onlineClassUuid: "string",
				studyStatus:dataList.studyStatus
			}
		}
		searchMyOnlineClass(data).then(res => {
			dataList.list = res.data.list
		})
	}
	const goclassDetail = (id) => {
		router.push({
			path: '/classDetail',
			query: {
				id
			}
		})
	}
	const selectTab = (idx, type) => {
		dataList.list = []
		dataList.tabindex = idx
		dataList.studyStatus = type
		getList()
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 910px;
		margin-left: 30px;

		&_title {
			width: 100%;
			border-bottom: 1px solid #D9D9D9;

			p {
				width: fit-content;
				font-size: 18px;
				font-weight: 600;
				color: #11918E;
				padding-bottom: 9px;
				border-bottom: 2px solid #11918E;
			}

		}

		&_bottom {
			margin-top: 30px;

			&_title {
				display: flex;
				align-items: center;
				margin-top: 30px;

				.s {
					width: 2px;
					height: 22px;
					background: #11918E;
					margin-top: 4px;
					margin-right: 10px;
				}

				p {
					font-size: 24px;
					font-weight: 600;
					color: #11918E;
				}
			}
		}
	}

	.classRoom_box {
		display: flex;
		flex-wrap: wrap;

		.isuser {
			width: 282px;
			height: 276px;
			margin-right: 30px;
			background: #FFFFFF;
			border-radius: 10px;
			border: 1px solid rgba(17, 145, 142, 0.1);
			margin-top: 30px;

			img {
				width: 280px;
				height: 186px;
			}

			p {
				width: 230px;
				margin: 15px;
			}

			li {
				width: 230px;
				margin: 15px;
				display: flex;
				justify-content: space-between;
			}
		}

		.isuser:nth-of-type(3n+0) {
			margin-right: 0;
		}
	}

	.select {
		display: flex;
		margin-top: 30px;

		li {
			margin-right: 30px;
			font-size: 18px;
			font-weight: 400;
			color: #333333;
			padding-bottom: 10px;
			border-bottom: 2px solid #FFFFFF;
		}

		.active {
			color: #11918E !important;
			border-bottom: 2px solid #11918E !important;
		}
	}
</style>